<template>
<div class="graph-panel">
    <chart-table ref="panel" v-if="graphType=='table'"  :graph-options="graphOptions" :tablist="tablist" :table-column='tableColumn'></chart-table>

    <echart-panel ref="panel"  v-else :graph-options="graphOptions"   :table-column='tableColumn'></echart-panel>
    <!-- <component ref="panel" :is="comptName" :graph-options="graphOptions" :tablist="tablist" :table-column='tableColumn'></component> -->
</div>
</template>

<script>
import getData          from 'getData'
import EchartPanel      from './echarts-panel'
import chartTable       from  './chart-table'
import {chartUtil,chartOptions} from '@/assets/js/graph-chart'
import util from 'util'
export default {
    components: {
        EchartPanel,chartTable
    },
    props: {
        datasource: {
            type: Object
        },
        graphType: {
            type: String
        },
        graphOptions: {
            type: Object
        },
        paneltype:{
            type: String,
            default:'show'
        }
    },

    watch: {
        datasource: {
            deep: true,
            handler (val,old) {
                if(val.groups.length==old.groups.length  && val.numbers.length==old.numbers.length){
                    this.queryData(false);
                }else{
                    this.queryData(true);
                }
                
            }
        },
        // graphType(val) {
        //     this.setGraphType(val);
        // }
    },
    computed: {
        comptName() {
            switch(this.graphType) {
                case 'table' :
                    return 'chartTable'
                default:
                    return 'EchartPanel';
            }
        }
    },
    data () {
        return {
            tablist:[],
            tableColumn:'',
        }
    },

    methods: {
        init() {
            if(this.graphType){
                this.queryData();
            }
            
        },
        resizeChart() {
            this.$refs.panel.resize();
        },
        refresh() {
            this.$refs.panel.refresh();
        },
        getDataURL(){
            return  this.$refs.panel.getDataURL();
        },
        queryData(change) {
            if(!this.graphType){
                return ;
            }
            console.log('数据源改变 重新查询数据 |','是否改变数值维度：'+change  ,this.graphType)
            if(this.datasource.datasourceId!=null  && this.datasource.datasourceType !=null){
                getData.post('queryData', this.datasource).then((res) => {
                    if (res.status == 200 && res.data.code == '000') {
                        this.tablist =util.util.cloneObj(res.data.data);
                        this.tableColumn =this.datasource.groups.length;
                        if(this.datasource.groups.length>0){
                            if (this.datasource.groups.length==1) {
                                //单维度
                                var list =res.data.data;
                                var sets =[];
                                var item ;
                                for(var i  =1;i<list[0].length;i++){
                                    item ={
                                        dimensions:[],
                                        source:[]
                                    };
                                    item.dimensions.push(list[0][0]);
                                    item.dimensions.push(list[0][i]);
                                    for(var j =1;j<list.length;j++){
                                        item.source.push([list[j][0],list[j][i]]);
                                    }
                                    sets.push(item);
                                }
                                this.$set(this.graphOptions,'dataset',sets)
                            }else if(this.datasource.groups.length==2){
                                //双维度
                                //第一列 为二维度
                                //第二列 为一维度
                                var list =res.data.data;
                                var sets ={
                                    dimensions:list[0]
                                }
                                sets.dimensions.splice(0,1)
                                list.splice(0,1);
                                var xtwo =[];

                                for(var i  in list ){
                                    xtwo.push(list[i][0]);
                                }
                                for(var i  in list ){
                                    list[i].splice(0,1);
                                }
                                for(var i =0;i<list.length;i++){
                                    list[i][0]+='_'+i;
                                }
                                sets.source =list;
                                sets.xdata =xtwo;
                                this.$set(this.graphOptions,'dataset',sets) ;
                            }
                            /*
                            1. change 编辑的时候，切换数值和维度，才初始化图表参数，全部重新渲染
                            2. 其他情况  继承渲染，例如初始化函数无法保存，需要重新生成，多维度需要重新生成部分参数*/
                                new chartOptions(this,{
                                    type:this.graphType,
                                    groupnum:this.datasource.groups.length ,
                                    clomnnum:this.datasource.numbers.length,
                                    extendState:!change
                                }).initChartOptions();
                        }
                        
                    } else {
                        console.error(res);
                    }
                });
            }else{
                console.error('数据源数据存在为空');
            }

        },
        // setGraphType(val) {
        //     if (val) {
        //         for (var index in this.options.series) {
        //             this.options.series[index].type = val;
        //         }
        //         if(this.options.series.length<this.options.dataset.source[0].length-1 && this.options.dataset.source!=null){
        //             for (var i=this.options.series.length;i<this.options.dataset.source[0].length-1;i++) {
        //                 this.options.series.push( {type: val});
        //             }
        //         }
        //     }
        // }
    },
    mounted() {
        // this.setGraphType(this.graphType);
        this.init();
    }

}
</script>

<style>
.graph-panel{
    width: 100%;
    height: 100%;
}
</style>
